<template>
  <div class="form__container">
    <FormTitle>其他信息</FormTitle>
    <t-form :rules="pageData.formRules" :disabled="props.readOnly" :data="pageData.localData" :labelWidth="120">
      <t-form-item label="备注" name="remark">
        <t-textarea v-if="!readOnly" v-model="pageData.localData.remark" :autosize="{ minRows: 5 }" />
        <div v-else class="form__text">{{ pageData.localData.remark }}</div>
      </t-form-item>
    </t-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";

import FormTitle from "@/components/Form/Title/index.vue";

const props = defineProps(["formData", "readOnly"]);
const emit = defineEmits(["updateData"]);

const pageData = reactive({
  formRules: {},
  localData: { ...props.formData }
});

watch(
  () => pageData.localData,
  (newData) => {
    emit("updateData", newData);
  },
  { deep: true, flush: "post" }
);

// pageData.localData = { ...props.formData };
</script>
